<template>
  <el-drawer
    v-model="drawerVisable"
    :title="title"
    ref="elDrawerRef"
    @closed="cancel"
    @open="open"
    :size="width"
    :destroy-on-close="isDestroy"
  >
    <slot></slot>
    <template #footer>
      <el-button type="default" @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit" :disabled="disabled">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="MyDrawer">
import { ref } from "vue";
const emits = defineEmits(["submit", "cancel", "open"]);
interface DrawerProps {
  title: string;
  disabled: boolean;
  width?: string;
  isDestroy?: boolean;
}
withDefaults(defineProps<DrawerProps>(), {
  width: "30%",
  isDestroy: false
});

const drawerVisable = ref(false);

// 打开抽屉
const acceptParams = () => {
  drawerVisable.value = true;
};
const submit = () => {
  emits("submit");
};
const cancel = () => {
  emits("cancel");
  drawerVisable.value = false;
};
const close = () => {
  drawerVisable.value = false;
};

const open = () => {
  emits("open");
};

defineExpose({
  acceptParams,
  close
});
</script>

<style></style>
